<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="开具发票"></uni-nav-bar>

		<view class="ui-con">
			<view class="tui-flex">
				<view class="ui-plate">{{dataList.plateNo}}</view>
				<view class="ui-flex-right">
					<view class="title">云谷停车场</view>
					<view class="ui-code">
						<text>订单编号:</text>
						<text class="tui-pd-left">{{dataList.orderNo}}</text>
					</view>
					<view class="ui-code">
						<text>开票金额:</text>
						<text class="tui-pd-left">{{dataList.totalAmount || 0}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="ui-con">
			<view class="bor-bot">
				<text>发票类型:</text>
				<text class="tui-pd-left">增值税电子普通发票</text>
			</view>
			<view class="bor-bot tui-flex tui-pd-top">
				<view>抬头类型</view>
				<view class="pad-let">
					<view @tap="checkboxOff = !checkboxOff">
						<uni-icons type="checkbox-filled" size="40" :color="!checkboxOff ? '#6CB041': '#ccc'"></uni-icons>
					</view>
					<text class="tui-pd-left">企业单位</text>
				</view>
				<view class="pad-let">
					<view @tap="checkboxOff = !checkboxOff" >
						<uni-icons type="checkbox-filled" size="40" :color="checkboxOff ? '#6CB041': '#ccc'"></uni-icons>
					</view>
					<text class="tui-pd-left">个人/非企业</text>
				</view>
			</view>

			<!--企业单位-->
			<view v-if="!checkboxOff">
				<view class="bor-bot tui-flex">
					<view>发票抬头</view>
					<view class="tui-pd-left" style="flex: 1;">
						<input class="uni-input" placeholder-class="placeholder" placeholder="这里是抬头名称" />
					</view>
				</view>
			</view>

			<!--个人/非企业-->
			<view v-else>
				<view class="bor-bot tui-flex">
					<view>发票内容</view>
					<view class="tui-pd-left" style="flex: 1;">
						<input class="uni-input" placeholder-class="placeholder" placeholder="发票内容" />
					</view>
				</view>
			</view>
		</view>

		<!--按钮-->
		<view class="bot-but">
			<button class="btn">提交申请</button>
		</view>
	</view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'

	export default {
		components: {
            uniIcons
		},
		data() {
			return {
                checkboxOff: false,
                dataList: {
                    orderNo: null,
                    totalAmount: null,
                    title: null,
                    plateNo: null
                }
			}
		},
		onLoad(options) {
			this.dataList = {
                orderNo: options.orderNo,
                totalAmount: options.totalAmount,
                title: options.title,
                plateNo: options.plateNo
			}
		},
		methods: {
		}
	}
</script>
<style lang="scss" scoped>
.ui-con {
	margin: 40rpx 30rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	.ui-plate {
		background: $uni-color-primary;
		height: 140rpx;
		color: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
		line-height: 90rpx;
		font-size: 32rpx;
	}
	.ui-flex-right {
		padding-left: 30rpx;
		.title {
			font-weight: 500;
			font-size: 36rpx;
		}
		.ui-code {
			color: #999;
		}
	}

	.bor-bot {
		border-bottom: 2rpx solid #eee;
		padding-bottom: 20rpx;
		font-size: 32rpx;
		&:last-child {
			border-bottom: 0;
			padding-bottom: 0;
			padding-top: 20rpx;
		}
		.pad-let {
			padding-left: 36rpx;
			display: flex;
			align-items: center;
		}
		.uni-input {
			text-align: right;
		}
		.placeholder {
			color: #ccc;
		}
	}
}

.bot-but {
	position: fixed;
	width: 100%;
	bottom: 0;
	.btn {
		background-color: #6CB041;
		color: #fff;
		border-radius: 0;
		border: 0;
	}
}
</style>